by Ibrahim Malluf
In this chapter
When the ActiveX Control Pad was released, almost no one in the development community knew it was comming. We all knew that the VBScript development tools at the time were limited to NotePad or some other text editor. Ron and I were even working on the beginnings of a limited IDE to include with th book. The ActiveX Control Pad completely changed all of that. Enthusiastic?, you bet !
The first impression you get of the ActiveX Control Pad is that it is a really cool environment for placing ActiveX controls on a form, visually aligning them, and manipulating their properties. As you dig deeper and play with the Script Wizard, you find that you haveaccess to all of the Explorer's object properties and methods, access to all of the added control properties and methods, and, finally, the ability to add and edit user-defined procedures and variablesùall within the Script Wizard. You come to the realization that the ActiveX Control Pad is actually a complete VBScript or JavaScript editor, as well as an ActiveX Control editing tool. Some serious limitations and a few bugs exist in the beta product we are writing about here, but expect the ActiveX Control Pad to be much more robust and stable by the time you read this book.
The first thing that greets you when you load the ActiveX Control Pad is a Multiple Document Interface (MDI) setup with the usual menu bar, tool bar, and status bar (see fig. 3.1). The right mouse button calls a pop-up menu that gives access to the ActiveX Control Pad's features, depending on your current context. The ActiveX Control Pad adheres to the Windows 95 standard interface for MDI applications.
FIG. 3.1
Open the ActiveX Control Pad for the first time.
A child form containing a document window titled Page1 is open waiting for you input. This document window is a direct edit window for HTML documents, complete with a skeletal outline of HTML tags (refer to fig. 3.1). You can load any HTML page into ActiveX Control Pad and begin editing it. Down the left side of the edit window a gray vertical bar serves as a container for mini-icons that indicate the placement of Controls, Script, and Layout Forms (see fig. 3.2).
Look at the mini icons in the Document Window.
These icons will bring up the appropriate object editor when you click a left mouse button on them. Clicking the script icon brings up the Script Wizard; clicking a control icon brings up the ActiveX control editor. Figure 3.3 shows the ActiveX Control Pad with a label control in edit mode and the resulting Web page with that label in an Explorer 3.0 window.
The placement of ActiveX controls directly on a Web page is limited to the peculiarities of the Web design. You cannot exactly place a control in terms of its Top or Left properties but are limited to the Right, Center, Left type of placement commands that HTML provides. You can create tables and place controls within those tables for a greater degree of control over where they will appear, but theplacement limitations are still there.
Prior to the availability of the ActiveX Control Pad, placing of ActiveX controls in your document involved getting the CLSID of the object from the Registry, placing it into the Object Tag, remembering all of the relevant properties of the control that you needed to modify, and finally remembering or otherwise finding out what event or methods were available for the control. It was very tedious work. The ActiveX Control Pad puts all of this behind with an almost ideal environment for placing and editing ActiveX controls in your document.
In Figure 3.3, you can see the Edit Control window in the upper left. In the Edit Control window, you can visually size your control and directly edit some properties; in the label's case, you can edit the caption property. On the left side of Figure 3.3 is the Properties window. If you have ever worked with Visual Basic, this window is quite familiar. It provides a list of all the editable properties for the selected control. You can edit those properties right in the Properties window. Once you have your properties set and the control sized the way you want it, you close the control's Edit window and the resultant HTML code is placed into the document you are editing.
FIG. 3.3
Edit an ActiveX label control with the ActiveX Control Pad.
The code that the ActiveX Control Pad inserted into our document for our example label is shown in Listing 3.1. As mentioned earlier, in the beta version of Explorer 3.0, the only way to insert an ActiveX object into the document was to extract the CLSID number from the Windows registry by looking it up with a utility like Regedit. The ActiveX Control Pad eliminates this entirely.
Listing 3.1 CHAPER3_1.HTMLùThe ActiveX Control HTML code inserted by the ActiveX Control Pad
When directly working with ActiveX controls on the HTML document as shown in this chapter, you simply choose the Insert ActiveX Control from the edit menu or from the pop-up menu when right-clicking the mouse button. A dialog box, as shown in Figure 3.4, pops up and lets you select from a list of all available ActiveX controls on your system. Just click on the desired control and it is automatically inserted into your document including the required CLSID number.
Select an ActiveX Control to insert directly into an HTML document.
At the time of writing this book, Explorer 3.0 Beta 1 did not have the licensing mechanism in place. So many ActiveX controls, while functional in a development environment would not work in a Web page. Only the controls that actually shipped with ActiveX Control Pad were guaranteed to work. Microsoft said that this issue would be resolved by the time Explorer 3.0 is a shipping product. Part of this solution will include a limitation on what controls you can use based upon those licensing requirements.
In Figure 3.4, you can see that a command button is about to be selected from the controls list dialog. The command button will be used to add some user interaction to the demo page. The command button is added to the project having its name property changed to btnStartStop. After going through the drill of setting properties, sizing the button, and so on, the edit window is closed and the script behind the button is entered into the button's click event.
By right-clicking the mouse on the HTML document on the desired insertion point, the pop-up menu allows the selection of the Script Wizard as shown in Figure 3.5.
The Script Wizard opened to the btnStopStart Command button's click event procedure.
The ActiveX Control Pad's Script Wizard provides an editing environment that gives easy access to all events, procedures, properties, and methods of the Layout control and all other controls and scripts contained within the Layout Control. Figure 3.5 shows the Script Edit window open to the click event of the Command button that was added to the HTML document. I want to cause Label1's forecolor to change every time the button is clicked to a randomly selected color. Looking again at Figure 3.5, in the right side list box labeled 2. Insert Actions, select the Label1's forecolor property by double-clicking it. It will be automatically inserted into the button's click event script. Complete the script by adding the code in Listing 3.2 to generate a random number. Finally finish by closing the Script Wizard's window. The VBScript code is automatically inserted into the HTML document.
Listing 3.2 CHAP3_01.HTMùThe Click Event Code Is Inserted by the Script Wizard
The Script Wizard can work with either VBScript or Java Script. But the Wizard, as it stands now, cannot work with a document that is using both. It's a one-or-the-other proposition. The Script Wizard's List View provides an alternative method to writing VBScript. By selecting List View, you can have the Script Wizard insert code into events for you using dialog boxes based on the action you select from the Insert Actions list.
As an example, let's have Label1's caption change to This is a Test when clicking the mouse button on it it and have the caption return to ActiveX Control Pad when letting the mouse button back up. To do this select the MouseDown event in the Event window as the event where the code will be inserted. Select Label1.Caption in the Select Action window. The dialog shown in Figure 3.6 illustrates how to add the changed caption to the MouseDown event. The Script Wizard will present any one of a number of different dialogs based on the action selected. In this case, selecting the caption action means that I want to add a different text to the caption, so a text entry dialog is presented.
FIG. 3.6
Use the Script Wizard in List View Mode to add code to the MouseDown event of a label.
The Script Wizard is a great aid to writing event event driven script that holds your hand when needed and easily gets out of the way when you want to do things your way.
Since the ActiveX Control Pad is an MDI application, you can have several Web page documents open at one time. You can have several Layout Forms open as well. "What are Layout Forms?," you ask? Just continue reading to find out about one of the most innovative improvements to HTML Web pages to come down the information highway.
The HTML document, as it stands today, allows you to place many different types of objects on a browser's screen but imposes a very strict set of placement rules that can make designing Web pages very frustrating at times. How often have you wished to be able to precisely place a graphic, input box, or even text in anexact spot on your page, or how about the ability to place overlapping graphics and controls? Well this ability, along with a few other, eye-opening advancements, is now available through the auspices of The ActiveX Layout Control. (For Visual Basic programmers, the closest analogy to the Layout Control is a Visual Basic Form's client area. You have this sizable form that allows you to place your text and controls precisely where you want them with none of the restrictions imposed by HTML pages.)
From the File menu or the right-click pop-up menu, select Insert New Layout Control. A dialog pops up asking for a file name for the new Layout control. Enter Chap3_02 for the name of the Layout control file as shown in Figure 3.7.
FIG. 3.7
Insert a new Layout control into a Web page.
While the example that I am developing here is specifically intended for insertion into a particular page, I should mention that you can create or edit a Layout control without making it part of a Web page document. By selecting New Layout Control from the Files menu, you can set up a new Layout control without any associated Web Pages.
Continuing on with this example, you can see in Figure 3.8 a Layout Control open in edit mode, along with a Toolbar containing available ActiveX controls. As mentioned earlier, the Layout Control appears exactly like a Visual Basic form, But unlike a Visual Basic form, only the client area of the form is visible when displayed on a Web page document.
FIG. 3.8
The Layout control and toolbar are ready for editing.
The Toolbar gives you a selection of ActiveX controls that you can add to your Layout Control very simply. Select an ActiveX control on the Toolbar by left-clicking the mouse pointer on the ActiveX control desired. You can then draw the control on the form by moving the mouse pointer to Layout Control's client area and drawing the control while holding down the left mouse button. The list of available ActiveX controls can be easily added to by right-clicking The Mouse on the Toolbar; a dialog (as shown in fig. 3.9) pops up allowing you to choose the controls to add to your oolbar. In fact the toolbar is a fascinating expansion of the original Visual Basic toolbar. The ActiveX control toolbar allows you to arrange groups of controls on different pages.
FIG. 3.9
Use this dialog window for adding ActiveX controls to the toolbar.
To add controls to or delete controls from a particular page, make the page the active one, right-click that page, then add or delete controls using the pop-up menu's selections. You can add pages to the toolbar by right-clicking one of the tabs to get a pop-up menu allowing you to add or delete pages. The menu also allows you to rename the page's tabs or change the order of the tabs.
But here's the real kicker: you can export or import toolbar pages! Imagine having a set of custom controls relevant to a particular project assembled on one toolbar page. Now if you have several of these pages, you can load or unload depending on what is needed for the project you are working on.
Going back to the project at hand, I can begin to add some controls and then add some VBScript to round out the example project for this chapter. Let's say that the assignment is to create a demonstration of the Chart ActiveX control that can be dropped on any HTML document. The Chart ActiveX control has several different chart types that should have a method that makes it easy to switch back and forth between the different types. In this case a TabStrip is used as an easy way to select the viewing of the different chart types. After adding the TabStrip, add several tabs, one for each chart type that is going to be displayed using the pop-up menu shown in Figure 3.10. To get at this menu, you have to get the tab strip to change into Tabselect mode by left-clicking the left mouse button on a tab. When the tab you are clicking on gets the focus (noticeable by the tab's caption being outlined), right-click the mouse and the pop-up menu in Figure 3.10 will show.
FIG. 3.10
Here's the Pop-up menu for adding tabs to the TabStrip.
I had trouble getting this to work consistently and attribute it to the still shaky interface code of the Beta product. I expect that it will have improved responsiveness by the time this book is printed. If you are still working with the Beta release, be patient with some of these interface problems and retry some of these things until they do work for you.
In this example, 21 tabs were added to the control, then for each tab select Rename from the tab's pop-up menu and add the Chart type name to the tab that correspond's to the Chart control's Chart type (such as Tab 0 = 0-Simple Pie Chart, Tab 1 = 1-Special Pie chart, and so on), until all of the chart types are entered into the tab control. Then Iput an ActiveX Chart control into the layout as shown in Figure 3.11. add an ActiveX IELabel control to the Layout Form to complete the example layout. Later in the chapter I will flesh out the example Layout Control with some code.
FIG. 3.11
Here's the Layout control with the Chart control and Label control added to it.
The Layout Control at the time of writing this book was a separate item that had to be downloaded by the IE30 Beta 1 browser. According to Microsoft, the release version of Internet Explorer 3.0 will incorporate the Layout Control so that it will not have to be downloaded. The code for the Layout Control is presently contained in a separate .ALX file that is downloaded by your Web document during runtime. My understanding is that as soon as the W3C approves and adopts the new initiatives presented by Microsoft, the Layout Control's code will be able to be within the Web document itself. In any case, the Layout Control lends itself to the development of drop-in-place interface elements such as navigational bars, data input forms, data display, and other operations that can be easily encapsulated.
The application I develop in this section demonstrates the different capabilities of ActiveX Chart Control, which comes with the ActiveX Control Pad. In this section we'll use the Script Wizard to build the underlying code that will control the ActiveX Chart control demo.
In this example the tab strip has 21 tabs, each named after a chart type in the Chart control's properties. Conveniently, the chart types are designated by numbers, so Ican make each tab correspond to a chart type number. Right-clicking to bring up the Script Wizard as shown in Figure 3.12, we choose the change event of the tab strip (ID=tabChart) and add the code shown in Listing 13.3.
FIG. 3.12
Select the Change Event of the TabStrip from the Script Wizard.
Listing 3.3 CHAP3_02.ALXùChanging the Chart Type Displayed According to the Selected Tab Index
This single line of code in the tabCharts_Change eventcauses the chart types to change with each change of a tab.
If you are considering using the the click event,instead of the change event I should warn you that in a multi-row tab control the click event will not show a change to the tab you clicked on if there was a row change. Even though the focus ring in the tab changes to the tab you clickedon, the actual focus will not change. You have to click on the tab a second time to cause an actual shift of focus to the desired tab. Using the change event avoids this problem.
With this much completed, save the Layout Control and call up the page containing it in Explorer. The user should be able to go through each chart type, as shown in Figure 3.13.You could leave it at that and have the demo completed, but many of the different chart views will not be showing their best view with the default data contained in the chart control. There might also be a desire to have a different look every time tabs are changed.
Let's start by adding a procedure that will add a random number of rows and columns. Calling up the Script Wizard, Iright-click the mouse pointer on Procedures in the Insert Actions list, and a pop-up menu allows you to select New Procedure. The procedure window shows a sub named Procedure1. Since the procedure is supposed to return a value a function procedure is wanted instead of the Sub type procedure. Change the sub to function while also changing the name of the procedure to RandomNumber. In this edit window, note that the procedure declaration area is entered by clicking the mouse pointer on the declaration line.
You also need to click the mouse pointer into the procedure body area to edit the script after you have edited the name and type of the procedure. There were no shortcut keys that I could find letting me jump from one area to another in the editor. The Tab key didnn't work either. Going through the prototype help file also didn't reveal any shortcuts. Perhaps by the time the ActiveX Control pad has been released from beta, issues like this will have been addressed. Listing 3.4 shows the RandomNumber function along with the modified tabChart_Change event procedure utilizing the function.
Listing 3.4 CHAP3_02.ALXùThe RandomNumber Function and the tabChart_Change Event Procedure Modified to Use the Function
The function takes a numeric argument that determines the upper range of the random number to be generated. Note that I first check the argument for being a numeric value with the IsNumeric() function. If it is not a numeric value, then the argument is ignored and a random number is generated that would be safe for all circumstances in this application. In this instance, keeping the script operational is more important than confronting the user with an error condition. When the user selects a chart type, it will present the chart in a different configuration every time.
Am I satisfied yet? Not at all! I want the chart to have some timer-driven animation, so let's add an ieTimer object to the Layout control and set its Interval property to 3000, as shown in Figure 3.13.
FIG. 3.13
Add a timer control to the chart demo Project.
Create a procedure using the Script Wizard that iterates through all of the rows and columns of the chart controlsetting each row/column DataItem property to a new random value. This sub procedure will be called by the timer at the end of each interval. Listing 3.5 shows the code.
Listing 3.5 CHAP3_02.ALXùThe ieTimer_Timer Event Calling the ColumnValues Procedure
The ColumnValues sub procedure changes all the DataItem values in the chart control every time it is called, using two simple nested For Next loops.
Let's continue with this example program and write some VBScript in the HTML document that will manipulate the chart demo. Suppose Iwanted the demo to automatically change the chart types after a given period of inactivity. The way to do this would be to place a timer in the document that would count down a set period of inactivity and change the current tab in the Layout Control if it hasn't been changed by the user within that period of time. Right-click the Chap3_02.HTML Document and select the ieTimerCTRL from the control list. Then set the Interval to 3000 and Enabled to true and close the edit window for the control. Opening the Script Wizard, add four global variables and the code shown in Listing 3.6.
Listing 3.6 CHAP3_02.HTMùThe Timer Event Code Used to Change the Displayed Chart Type
The code presented in Listing 3.6 is fairly straightforward. It first checks to see if the current tab index is different from the what it was in the previous timer event. If it is, then it restarts the countdown. If not, then it decrements the count contained in lngCountDown. When lngCountDown falls below 0, the tab is moved to the next available tab. If the last tab has been reached, it restarts at tab 0 and the whole process starts over again.
The Beta version of the Layout Control is usually loaded after the VBScript in the HTML document is parsed. This results in your VBScript code's references to the Layout Control to always fail. Microsoft's original position on this was that you would not be able to reference the properties and methods of the Layout control from your HTML document. But someone on the VBScript newslist discovered that by adding the OnLoad="InitALX" to the VBScript declaration tag you could indeed reference the Layout Control's properties and methods. Microsoft says that this won't be an issue in the released product. This caution is included just in case this is still a problem and you find yourself in the above described situation.
The Chap_03.alx file can be dropped on any Web page document. The most convenient way to do this is to load your HTML document into the ActiveX Control Pad and select the Add Layout Control menu item from the Files menu or from the right-click pop-up menu. Later on in subsequent chapters there will be more examples of using the ActiveX Control Pad with ActiveX controls and VBScript to produce Some useful applications.
This chapter introduces the ActiveX Control pad as the tool de jour for creating VBScript HTML pages. The Layout Control is also introduced here because of it's close relationship to the ActiveX Control pad. The Layout Control is not an integral part of the ActiveX Control Pad though, but an independant ActiveX Control that will be distributed as part of the ActiveX controls distributed with the Internet Explorer 3.0 browser. The Active X Control Pad and the Layout Control are used throughout this book to develop various approaches to Web page development. These chapters include:
| Previous Chapter | Next Chapter |
| Search | Table of Contents | Book Home Page | Buy This Book |
| Que Home Page | Digital Bookshelf | Disclaimer |
To order books from QUE, call us at 800-716-0044 or 317-361-5400.
For comments or technical support for our books and software, select Talk to Us.
© 1996, QUE Corporation, an imprint of Macmillan Publishing USA, a Simon and Schuster Company.
